
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        alignItems: 'center',
        paddingBottom:10,
        backgroundColor: '#FA6778'
    },
    text: {
        fontSize: 16,
        margin: 10,
        textAlign: 'center',
        color: '#333333'
    },
    circle: {
        backgroundColor: '#fe0000',
        borderRadius: 10,
        width: 20,
        height: 20
    },
    centerBase: {
        width:100,
        height: 100,
        backgroundColor: '#333333'
    },
    itemStyle:{
        flex:1,
        alignItems: 'center'
    },
    circleStyle:{
        width:30,
        height:30,
        borderRadius:15,
        backgroundColor: '#fefefe'
    }
});

class TestViewCenter extends Component {

    _centerItem(title, centerStyle){
        return(
            <View style={styles.itemStyle}>
                <Text style={styles.text}>{title}</Text>
                <View style={[styles.centerBase, centerStyle]}>
                    <View style={styles.circleStyle}/>
                </View>
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                {this._centerItem('水平居中', {alignItems:'center'})}
                {this._centerItem('垂直居中', {justifyContent:'center'})}
                {this._centerItem('水平垂直居中', {alignItems:'center',justifyContent:'center'})}
            </View>
        );
    }
}

export default TestViewCenter;